<script setup lang="js">
import { onMounted } from 'vue';
import * as PIXI from 'pixi.js';

onMounted(() => {
    const app = new PIXI.Application({ resizeTo: window });

    document.getElementById('pixi-MergingGeometry-container').appendChild(app.view);

    const geometry = new PIXI.Geometry()
        .addAttribute(
            'aVertexPosition', // the attribute name
            [
                -100,
                -100, // x, y
                100,
                -100, // x, y
                100,
                100,
                -100,
                100,
            ], // x, y
            2,
        ) // the size of the attribute
        .addAttribute(
            'aUvs', // the attribute name
            [
                0,
                0, // u, v
                1,
                0, // u, v
                1,
                1,
                0,
                1,
            ], // u, v
            2,
        ) // the size of the attribute
        .addIndex([0, 1, 2, 0, 2, 3]);

    const geometry2 = new PIXI.Geometry()
        .addAttribute(
            'aVertexPosition', // the attribute name
            [
                -100 + 100,
                -100, // x, y
                100 + 100,
                -100, // x, y
                100 + 100,
                100,
            ], // x, y
            2,
        ) // the size of the attribute
        .addAttribute(
            'aUvs', // the attribute name
            [
                0,
                0, // u, v
                1,
                0, // u, v
                1,
                1,
            ], // u, v
            2,
        ) // the size of the attribute
        .addIndex([0, 1, 2]);

    const geometry3 = PIXI.Geometry.merge([geometry, geometry2]);

    const shader = PIXI.Shader.from(
        `
    
        precision mediump float;
    
        attribute vec2 aVertexPosition;
        attribute vec2 aUvs;
    
        uniform mat3 translationMatrix;
        uniform mat3 projectionMatrix;
    
        varying vec2 vUvs;
    
        void main() {
    
            vUvs = aUvs;
            gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
    
        }`,

        `precision mediump float;
    
        varying vec2 vUvs;
    
        uniform sampler2D uSampler2;
    
        void main() {
    
            gl_FragColor = texture2D(uSampler2, vUvs );
        }
    
    `,
        {
            uSampler2: PIXI.Texture.from('https://pixijs.com/assets/bg_scene_rotate.jpg'),
        },
    );

    const quad = new PIXI.Mesh(geometry3, shader);

    quad.position.set(400, 300);
    quad.scale.set(2);

    app.stage.addChild(quad);

    app.ticker.add((delta) => {
        quad.rotation += 0.01;
    });
})

</script>

<template>
    <div id="pixi-MergingGeometry-container"></div>
</template>

<style scoped></style>
